<template>
    <div>
        <ul class="tabs">
            <li>
                <router-link to="/course/LeagueLecture"  active-class="active"  >团课课程</router-link>
            </li>
            <li>
                <router-link to="/course/CourseSchedule"  active-class="active"  >团课课表</router-link>
            </li>
        </ul>
        <div class="tabContent"><!--视图切换-->
            <router-view></router-view>
        </div>
    </div>
    
    

</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: "CoursePage"
})
</script>

<style scoped>
.tabs li{
        float: left;
        width: 100px;
        list-style: none;
        /* padding: 10px; */
    }
    a{
        color:rgb(252, 250, 250);
        background-color: rgb(121, 208, 243);
        text-decoration:none; 
        width:100px;
        height:40px;
        padding:5px 15px;
        border-radius: 5px;
        font-size:14px;
    }

    .tabs{
        display: inline-block;
        padding:15px 20px;
    }
    .tabContent{
        height: 100%;
        width: 100%;
        /* border: 1px solid #5eb897; */
    }
    .active{
        background-color: rgb(47, 185, 240);
    }

</style>